<template>
	<view>
		<uni-nav-bar title="评价内容" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true"></uni-nav-bar>
		<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() - 10 + 'px'}">
			<view class="main" v-if="dataList.length>0">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view class="title-line"></view>
					<view class="title">
						{{item.name}}
					</view>
					<view class="baseline"></view>
					<view class="service">
						<view class="score">
							服务评分
						</view>
						<view class="rate">
							<uni-rate allow-half size="16" :value="item.starTypes[0].value" color="#bbb" active-color="red" :readonly="disabled"/>
						</view>
						<view class="result" v-if="item.starTypes[0].value == 0">
							请选择评分
						</view>
						<view class="result" v-else-if="item.starTypes[0].value<=1 && item.starTypes[0].value>0">
							非常差
						</view>
						<view class="result" v-else-if="item.starTypes[0].value<=2 && item.starTypes[0].value>1">
							差
						</view>
						<view class="result" v-else-if="item.starTypes[0].value<=3 && item.starTypes[0].value>2">
							一般
						</view>
						<view class="result" v-else-if="item.starTypes[0].value<=4 && item.starTypes[0].value>3">
							好
						</view>
						<view class="result" v-else-if="item.starTypes[0].value>4 && item.starTypes[0].value <= 5">
							非常好
						</view>
					</view>
					<u--textarea v-model="item.orderEvaluationType.desc" :disabled="disabled" placeholder="请输入评价内容"
						></u--textarea>
					<view class="upload">
						<view class="upload-item" v-for="(it,itIndex) in item.orderEvaluationType.extra" :key="itIndex">
							<image :src="it" alt="" mode="widthFix" @click="lookBigImg(it)" />
						</view>
					</view>
				</view>
			</view>
			<view class="blank" v-else>
				<image src="@/static/blank.png" mode=""></image>
				<view class="nodata">
					暂无评价信息
				</view>
			</view>
			<view class="bottom-ios-lineline">

			</view>
			<view class="bottom-ios-line">

			</view>
		</scroll-view>
		
		<u-overlay :show="overlayFlag" @click="overlayFlag = false">
			<view class="warp">
				<image :src="overlayUrl" mode="heightFix" class="img"></image>
			</view>
		</u-overlay>
		<view class="bottom-ios-line">

		</view>
	</view>
</template>

<script>
	import API from '@/api/socialized-servce/farm-service/mechanist/look-appraise/index.js'
	import {
		socializedBaseurl
	} from '@/config/baseUrl.js'
	export default {
		data() {
			return {
				disabled: true,
				orderNo: '',
				dataList: [],
				overlayFlag: false,
				overlayUrl: ''
			}
		},
		onLoad(e) {
			this.orderNo = e.orderNo
		},
		created() {
			this.setcollapseheight()
			this.getAppraiseContentList()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async getAppraiseContentList() {
				let res = await API.lookAppraise(this.orderNo)
				if (res.code === 200) {
					this.dataList = res.data
				}
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				// let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(136)

				winHeight = parseInt(winHeight) - topheightone
				// #ifndef H5
				winHeight = winHeight

				// #endif
				return winHeight
			},
			lookBigImg(e) {
				this.overlayFlag = true
				this.overlayUrl = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 0 40rpx;

		.item {
			position: relative;
			width: 670rpx;
			height: 506rpx;
			margin-top: 26rpx;
			padding-top: 36rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 10rpx;

			.title-line {
				position: absolute;
				left: 0;
				top: 40rpx;
				width: 10rpx;
				height: 32rpx;
				background: #91743E;
			}

			.title {
				width: 100%;
				margin-left: 24rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #91743E;
			}

			.service {
				display: flex;
				align-items: center;
				margin-top: 18rpx;
				padding-left: 24rpx;

				.score {
					margin-right: 16rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #606060;
				}

				.result {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #BABABA;
				}
			}
			
			.upload {
				margin-top: 20rpx;
				padding-left: 20rpx;
				.upload-item {
					width: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
	}

	.baseline {
		margin-top: 20rpx;
		width: 100%;
		height: 2rpx;
		background: #EFEFEF;
	}

	/deep/ .u-textarea {
		position: relative;
		width: 580rpx;
		height: 200rpx;
		margin-left: 24rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		opacity: 1;
		border: 1px solid #EAEAEA;
		border-color: red;
	}

	/deep/ .u-textarea__field {
		height: 200rpx !important;
	}
	
	.blank {
			position: absolute;
			width: 100%;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
	
			image {
				width: 200rpx;
				height: 200rpx;
			}
	
			.nodata {
				margin-top: 20rpx;
			}
		}
		
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>